import { getUserInfo } from '@/api/test'
import WrapPageTable from '@/components/originalTable'
import useWrapPageTable from '@/hooks/useWrapPageTable'
import { Button } from 'antd'
import React, { useEffect, useState } from 'react'

const Demo1: React.FC = () => {
  const { loading, tableState, fetchTableData } = useWrapPageTable();


  useEffect(() => {
    fetchData();
  }, [])

  type User = {
    id: number,
    name: string,
    age: number,
    address: string,
    sex: string
  }

  const fetchData = (params: any = {}) => {
    fetchTableData(getUserInfo({ ...params }), (data: any) => {
      console.log(data, "asdasd");

      return data.map((item: User) => {
        item.sex = item.id % 2 == 0 ? '男' : '女';
        return item
      })
    })
  }

  // 表格配置
  const tableSectionConfig = {
    columns: [{
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
      width: 120
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 120
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 120
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
      width: 420
    },],
    data: tableState,
    rowKey: 'id',
    loading,
    width: 800,
    height: 45 * 14,
    isDragHeader: true,
  }

  const handleSearch = (params: any) => {
    fetchData(params)
  }

  // 搜索配置
  const searchSectionConfig = {
    searchFields: [
      {
        label: '姓名',
        name: 'name',
      }, {
        label: "性别",
        name: "sex",
        options: [
          {
            label: "男",
            value: "1"
          }, {
            label: "女",
            value: "2"
          }
        ]
      }
    ],
    onSearch: handleSearch
  }

  // 操作按钮配置
  const actionSectionConfig = {
    actionButtons: [
      {
        render: () => {
          return <Button type='primary'>新增</Button>
        }
      },
      {
        render: () => (
          <Button type='primary' danger>批量删除</Button>
        )
      }
    ]
  }

  return (
    <div>
      <WrapPageTable
        actionSectionConfig={actionSectionConfig}
        searchSectionConfig={searchSectionConfig}
        tableSectionConfig={tableSectionConfig}
      />
    </div>
  )
}
export default Demo1